<template>
	<div class="navigator-list-box" v-if="rows.length > 0">
		<div :style="{backgroundColor: config.backgroundColor}">
			<van-row v-for="(row, i) in rows" :key="i">
				<van-col v-for="(item, j) in row" :key="j" :span="colSpan">
					<div class="navi-item" @click="toSubpage(item.subpageConfigId)">
						<image mode="widthFix" height="40" :src="item.url" />
						<div :style="{color: item.color}" class="iconTxt">{{item.text}}</div>
					</div>
				</van-col>
			</van-row>
		</div>
	</div>
</template>
<script>
	export default {
		name: "subpage-config-list",
		props: {
			config: {
				type: Object,
				required: true
			}
		},
		mounted() {},
		methods: {
			// 判断如果存在子页面模板id   跳转子页面
			toSubpage(id) {
				if (!id) {
					return
				}
				this.$router.push({
					path: '/pages/subpage/main',
					query: {
						id: id
					}
				});
			},
		},
		computed: {
			rowCount() {
				return Math.ceil(this.config.imageItems.length / this.config.columns);
			},
			colSpan() {
				return Math.floor(24 / this.config.columns);
			},
			rows() {
				let rows = new Array(this.rowCount)
					.fill(null)
					.map((item, index) => index)
					.map(item => {
						let s = item * this.config.columns,
							e = (item + 1) * this.config.columns;
						if (e > this.config.imageItems.length) {
							e = this.config.imageItems.length;
						}
						return this.config.imageItems.slice(s, e);
					});
				return rows;
			}
		}
	};
</script>
<style scoped lang="less">
	.navigator-list-box {
		width: auto;
		margin-top: 5rpx;
		padding: 0 30rpx;
		background: #ffffff;
	}

	.navi-item {
		padding: 10rpx 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		color: #333333;

		image {
			display: block;
			width: 100rpx;
			height: 100rpx !important;

		}
	}

	.iconTxt {
		padding-top: 8px;
	}
</style>
